<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <meta name="format-detection" content="telephone=no" />
    <title>医院评价</title>
    <link rel="stylesheet" href="/css/reset.css" type="text/css">
    <link rel="stylesheet" href="/css/hiddenDanger.css" type="text/css">
</head>

<body>
<div id="app" v-cloak>
    <div class="top-box">
        <div class="logo-box">
            <img src="/img/logo.png" alt="logo">
        </div>
        <p class="title">{{hospName}}{{name}}部存在隐患</p>
        <div class="min-font">
            <span class="le-font">位置不对？</span>
            <span class="ri-font"  @click="revise">点击修改</span>
        </div>
        <div class="evaluate-box">
            <div class="ev-title">
                <span class="line"></span>
                <span class="box-title">隐患具体描述</span>
                <span class="line"></span>
            </div>
            <div class="check-btn">
                <p class="font">选择隐患类型：</p>
                <div class="btns">
                    <div class="sm-btn" @click="isFire" :class="fire ? 'sm-btn-r' : ''">
                        <div class="btn-icon">
                            <img src="/img/f1.png" alt="fire" v-show="!fire">
                            <img src="/img/f2.png" alt="fire" v-show="fire">
                        </div>
                        <span>火灾隐患</span>
                    </div>
                    <div class="sm-btn" @click="isEle" :class="ele ? 'sm-btn-r' : ''">
                        <div class="btn-icon">
                            <img src="/img/e1.png" alt="electric" v-show="!ele">
                            <img src="/img/e2.png" alt="electric" v-show="ele">
                        </div>
                        <span>电路隐患</span>
                    </div>
                    <div class="sm-btn" @click="isWater" :class="water ? 'sm-btn-r' : ''">
                        <div class="btn-icon">
                            <img src="/img/w1.png" alt="water" v-show="!water">
                            <img src="/img/w2.png" alt="water" v-show="water">
                        </div>
                        <span>淹水隐患</span>
                    </div>
                </div>
            </div>
            <div class="text-box">
                <textarea placeholder="请详细描述隐患存在的位置和情况" v-model="areaValue" @blur="blurArea"></textarea>
            </div>
            <div class="add-img">
                <p class="add-font">添加图片，方便管理员快速了解情况</p>
                <div class="img-pop">
                    <div class="imgbox" v-for="(item,index) in imgurl"><img :src="item" alt=""></div>
                    <div class="add-btn">
                        <input type="file" @change="uploadImg($event)"
                               ref="inputer">
                    </div>
                </div>
            </div>
            <div class="btn" @click="uploadMsg">提交评价</div>
        </div>
    </div>
    <div class="mask" v-if="maskShow" @click="popNone"></div>
    <transition name="fade">
        <div class="pop pop-revise" v-if="reviseShow">
            <p class="pop-title">修改地址</p>
            <p class="pop-title-s">您所在的医院</p>
            <div class="select-list">
                <select v-model="hospValue" @change="selectFn($event)">
                    <option v-for="(item,index) in hospSelect" :value="item.id">
                        {{item.name}}
                    </option>
                </select>
            </div>
            <p class="pop-title-s">您所在的科室</p>
            <div class="select-list">
                <select v-model="choseValue">
                    <option v-for="(item,index) in selectValue" :value="item.id">
                        {{item.name}}
                    </option>
                </select>
            </div>
            <div class="pop-select-btn">
                <div class="popbtn" @click="closePop">取消</div>
                <div class="sure-btn popbtn" @click="sureFn">确定</div>
            </div>
        </div>
    </transition>
</div>
<script src="/js/rem.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/layer/layer.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            areaValue: '', //输入框的内容
            section:'{$id}',
            hospValue:'{$res.hid}',//所在医院
            hospName:'{$res.hospitalName}',
            hospSelect:JSON.parse('{$hospital}'),
            name:'{$res.sectionNmae}',
            fire: false, //true为点击了火灾隐患
            ele: false, //true为点击了电路隐患
            water: false, //true为点击了水隐患
            formData: new FormData(),
            imgurl: [],//图片路径
            maskShow:false, //遮罩
            param:'',
            img:'',
            reviseShow:false,
            selectValue:JSON.parse('{$section}'),
            choseValue:'{$id}', //选择的科室
        },
        //页面一进入调用的接口，写里面
        created() {

        },
        methods: {
            //上传图片
            uploadImg() {
                let file = event.target.files[0];
                console.log(file)
                var index = layer.load();
                //this.imgurl = window.webkitURL.createObjectURL(file);
                this.param = new FormData();
                this.param.append('file', file, file.name);
                var that = this
                $.ajax({
                    url: "/index/Danger/uploads",
                    data: this.param,
                    type: "Post",
                    dataType: "json",
                    cache: false,//上传文件无需缓存
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须
                    success: function (result) {
                        that.img = that.img + ',' + result
                        that.imgurl.push(result)
                        layer.close(index);
                    },
                    error : function() {
                        layer.close(index);
                        layer.msg('图片读取失败');
                    }
                })

            },
            isFire() {
                this.fire = !this.fire
                this.ele = false
                this.water = false
            },
            selectFn(e) {
                console.log(e.target.value)
                var that = this
                $.ajax({
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/index/index/hosp" ,//url
                    data: {id:e.target.value},
                    success: function (data) {
                        that.hospName = data.hospName;
                        that.selectValue=JSON.parse(data.section)
                    },
                    error : function() {
                        alert("异常！");
                    }
                })
            },
            isEle() {
                this.ele = !this.ele
                this.fire = false
                this.water = false
            },
            isWater() {
                this.water = !this.water
                this.ele = false
                this.fire = false
            },
            blurArea() {
                document.body.scrollTop = 0
            },
            //提交
            uploadMsg() {
                var type = this.fire?1:(this.ele?3:2);
                var that = this;
                if(!this.fire && !this.ele && !this.water){
                    layer.msg('请选择隐患类型');
                }else if(this.areaValue == ''){
                    layer.msg('请描述隐患情况');
                }else{
                    $.ajax({
                        url: "/index/Danger/addDanger",
                        data: {section_id:that.section,place:that.areaValue,type:type,images:that.img},
                        type: "Post",
                        dataType: "json",
                        success: function (data) {
                            if(data == 200){
                                // layer.open({
                                //     content: '您反馈的情况已经收到，我们会尽快安排处理.非常感谢您的支持！',
                                //     time: 2000
                                // });
                                layer.msg('您反馈的情况已经收到，我们会尽快安排处理.非常感谢您的支持！', {
                                    time: 2000, 

                                });
                                setTimeout(function (){

                                    WeixinJSBridge.call('closeWindow');
                                }, 2000);


                            }else{
                                layer.msg('提交失败！');
                            }
                        },
                    })
                }
            },
            //弹窗消失
            popNone(){
                this.maskShow = false
                this.reviseShow = false
            },
            //修改地址
            revise(){
                this.maskShow = true
                this.reviseShow = true
            },
            //关闭弹窗
            closePop(){
                this.maskShow = false
                this.reviseShow = false
            },
            //提交修改
            sureFn(){
                this.maskShow = false
                this.reviseShow = false
                this.section = this.choseValue
                var id = this.choseValue
                var that = this
                $.ajax({
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/index/index/section" ,//url
                    data: {id:id},
                    success: function (data) {
                        that.name = data
                    },
                    error : function() {
                        alert("异常！");
                    }
                })
                console.log(this.choseValue) //选中的值
            }
        },
    })
</script>
</body>

</html>